const path = require('path');
const HTMLWebPlugin=require('html-webpack-plugin');
const {CleanWebpackPlugin}=require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports={
    entry:'./src/index.ts',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name]_[hash:8].js',
        //配置打包环境，告诉webpack不使用箭头函数
        environment:{
            arrowFunction:false,
            const:false
        }
    },
    module:{
        rules:[
            {
                test:/\.ts$/,
                use:[
                    {
                        loader:'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    },
                    'ts-loader'
                ],
                exclude:/node_modules/
            },
            {
                test:/\.less/,
                use:[
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    {
                        loader:"postcss-loader",
                        options:{
                            postcssOptions:{
                                plugins:[
                                    [
                                        "postcss-preset-env",{
                                            browsers:'last 2 versions'
                                        }
                                    ]
                                ]
                            }
                        }
                    },
                    "less-loader"
                ]
            }
        ]
    },
    resolve:{
        extensions:['.ts', '.tsx', '.js']
    },
    mode:'development',
    plugins:[
        new HTMLWebPlugin({
            //title:"这是一个自定义的title",
            template:"./src/index.html"
        }),
        new MiniCssExtractPlugin({
            filename:'[name]_[hash:8].css',
            chunkFilename:'[id].css'
        }),
        new CleanWebpackPlugin()
    ]
}